<template>
	<view class="content" :style="{paddingTop: statusBarHeight + menuButtonHeight + 'px'}">
		<image class="app-bg" src="../../static/bg/my-bg.png" mode="widthFix"></image>
		<customSwiper :swiper-list="swiperList" />
	</view>
</template>

<script lang="ts">
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		defineComponent,
		reactive,
		toRefs,
		inject,
		ref
	} from 'vue'
    import customSwiper from '@/components/blackmonth-swiper/index'
	

	const appIndex = defineComponent({
		name: 'appIndex',
		components: {
			customSwiper
		},
		setup(props) {
			const app : any = inject('global')

			onLoad(() => {
				console.log('页面开始加载', props, app)
				const systemConfig = uni.getSystemInfoSync()
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				data.statusBarHeight = systemConfig.statusBarHeight
				data.menuButtonHeight = menuButtonInfo.height
			})
			const data = reactive({
				info: '',
				statusBarHeight: 0,
				menuButtonHeight: 0,
				swiperList: [
					{
						type: 'image',
						url: '/static/bg/card-bg.png'
					},
					{
						type: 'image',
						url: '/static/bg/card-bg2.png'
					},
					{
						type: 'image',
						url: '/static/bg/card-bg.png'
					},
					{
						type: 'image',
						url: '/static/bg/card-bg2.png'
					},
					{
						type: 'image',
						url: '/static/bg/card-bg.png'
					},
					{
						type: 'image',
						url: '/static/bg/card-bg2.png'
					},
					{
						type: 'image',
						url: '/static/bg/card-bg.png'
					}
				]
			})
			
			return {
				...toRefs(data),
				app
			}
		}
	})
	export default appIndex
</script>

<style lang="less" scoped>
	.content {
		position: relative;
		.app-bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
		}
	}
</style>